<?xml version="1.0" encoding="UTF-8"?>
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core">
    <h:head>
    </h:head>
    <body>

        <p:messages />

        <h:form>
            <p:wizard flowListener="#{purchase.onFlowProcess}" >

                <p:tab id="initialize"  title="Select Voucher">

                    <p:panel header="Select Payment Mode">

                        <p:messages  autoUpdate="true"/>

                        <h:panelGrid columns="2" columnClasses="label, value" styleClass="grid">
                            <h:outputText value="Voucher: *" />
                            <p:selectOneMenu value="#{purchase.voucherId}" >
                                <f:selectItems value="#{companyDenominationView.allCompanyDenominations}" var="compDenom"
                                               itemLabel="#{compDenom.company.name}-#{compDenom.denomination.currency} #{compDenom.denomination.amount.toString()}" itemValue="#{compDenom.id}" />
                            </p:selectOneMenu>

                            <h:outputText value="Quantity: *" />
                            <p:inputText required="true" label="quantity"
                                         value="#{purchase.quantity}" />

                            <h:outputText value="MPower Account Mobile Number: *" />
                            <p:inputText required="true" label="accountNumber" value="#{purchase.mpowerAccountNumber}" />
                        </h:panelGrid>
                    </p:panel>
                </p:tab>



                <p:tab id="approve" title="Approval">
                    <p:panel header="Approval">
                        <p:messages  autoUpdate="true"/>

                        <h:panelGrid id="confirmation" columns="2">
                            <h:outputText value="Voucher : " />
                            <h:outputText value="#{purchase.voucher.company.name} - #{purchase.voucher.denomination.currency} #{purchase.voucher.denomination.amount}" />

                            <h:outputText value="Quantity: " />
                            <h:outputText value="#{purchase.quantity}"/>


                        </h:panelGrid>



                    </p:panel>

                </p:tab>

                <p:tab id="confirm" title="Confirmation">
                    <p:panel header="Confirmation">

                        <p:messages autoUpdate="true" />

                        <h:panelGrid columns="2" columnClasses="label, value">
                            <h:outputText value="Enter secret code: * " />
                            <p:inputText value="#{purchase.pin}" required="true" />

                        </h:panelGrid>
                        <p:commandButton value="Submit" 
                                         action ="#{purchase.save()}"/>
                    </p:panel>      
                </p:tab>


            </p:wizard>


        </h:form>


    </body>
</html>
